<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue拖拽测试</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 20px;
      }

      .container {
        display: flex;
        gap: 20px;
      }

      .source {
        width: 200px;
        border: 2px solid #ccc;
        padding: 10px;
      }

      .target {
        width: 400px;
        height: 300px;
        border: 2px dashed #999;
        padding: 20px;
        background: #f9f9f9;
      }

      .target.drag-over {
        border-color: #409eff;
        background: rgba(64, 158, 255, 0.1);
      }

      .draggable-item {
        padding: 10px;
        margin: 5px 0;
        background: #fff;
        border: 1px solid #ddd;
        cursor: move;
        user-select: none;
      }

      .draggable-item:hover {
        background: #f0f0f0;
      }

      .draggable-item.dragging {
        opacity: 0.5;
      }

      .dropped-item {
        padding: 8px;
        margin: 5px 0;
        background: #e6f7ff;
        border: 1px solid #91d5ff;
        border-radius: 4px;
      }

      .log {
        margin-top: 20px;
        padding: 10px;
        background: #f5f5f5;
        border: 1px solid #ddd;
        max-height: 200px;
        overflow-y: auto;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1>Vue 3 拖拽功能测试</h1>

      <div class="container">
        <div class="source">
          <h3>可拖拽组件</h3>
          <div
            v-for="component in components"
            :key="component.type"
            class="draggable-item"
            draggable="true"
            @dragstart="handleDragStart($event, component)"
            @dragend="handleDragEnd"
          >
            {{ component.name }}
          </div>
        </div>

        <div class="target">
          <h3>拖放目标区域</h3>
          <div
            :class="{ 'drag-over': isDragOver }"
            @dragover.prevent="handleDragOver"
            @dragenter.prevent="handleDragEnter"
            @dragleave="handleDragLeave"
            @drop.prevent="handleDrop"
            style="min-height: 200px; border: 1px dashed #ccc; padding: 10px"
          >
            <div v-if="droppedItems.length === 0">将左侧组件拖拽到此处</div>

            <div v-for="(item, index) in droppedItems" :key="index" class="dropped-item">
              {{ item.name }} - {{ new Date(item.timestamp).toLocaleTimeString() }}
            </div>
          </div>
        </div>
      </div>

      <div class="log">
        <h4>事件日志:</h4>
        <button @click="clearLog">清除日志</button>
        <div v-for="(log, index) in eventLogs" :key="index">[{{ log.time }}] {{ log.message }}</div>
      </div>
    </div>

    <script>
      const { createApp, ref } = Vue

      createApp({
        setup() {
          const isDragOver = ref(false)
          const droppedItems = ref([])
          const eventLogs = ref([])

          const components = [
            { type: 'button', name: '按钮组件' },
            { type: 'text', name: '文本组件' },
            { type: 'image', name: '图片组件' },
            { type: 'input', name: '输入框组件' },
          ]

          const addLog = (message) => {
            const time = new Date().toLocaleTimeString()
            eventLogs.value.push({ time, message })
          }

          const clearLog = () => {
            eventLogs.value = []
          }

          const handleDragStart = (event, component) => {
            addLog(`拖拽开始: ${component.name}`)

            const dragData = {
              type: component.type,
              name: component.name,
              timestamp: Date.now(),
              source: 'test',
            }

            event.dataTransfer.setData('application/json', JSON.stringify(dragData))
            event.dataTransfer.setData('text/plain', JSON.stringify(dragData))
            event.dataTransfer.effectAllowed = 'copy'

            event.target.classList.add('dragging')
          }

          const handleDragEnd = (event) => {
            addLog('拖拽结束')
            event.target.classList.remove('dragging')
          }

          const handleDragEnter = (event) => {
            addLog('拖拽进入目标区域')
            isDragOver.value = true
          }

          const handleDragOver = (event) => {
            addLog('拖拽悬停在目标区域')
            event.dataTransfer.dropEffect = 'copy'
          }

          const handleDragLeave = (event) => {
            const rect = event.currentTarget.getBoundingClientRect()
            const x = event.clientX
            const y = event.clientY

            if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
              addLog('拖拽离开目标区域')
              isDragOver.value = false
            }
          }

          const handleDrop = (event) => {
            addLog('拖拽放置事件触发')
            isDragOver.value = false

            try {
              let dragDataStr = event.dataTransfer.getData('application/json')
              if (!dragDataStr) {
                dragDataStr = event.dataTransfer.getData('text/plain')
              }

              addLog(`接收到拖拽数据: ${dragDataStr}`)

              if (dragDataStr) {
                const dragData = JSON.parse(dragDataStr)
                droppedItems.value.push({
                  ...dragData,
                  timestamp: Date.now(),
                })
                addLog(`组件添加成功: ${dragData.name}`)
              }
            } catch (error) {
              addLog(`拖拽数据解析失败: ${error.message}`)
            }
          }

          // 初始化日志
          addLog('Vue拖拽测试页面初始化完成')

          return {
            isDragOver,
            droppedItems,
            eventLogs,
            components,
            addLog,
            clearLog,
            handleDragStart,
            handleDragEnd,
            handleDragEnter,
            handleDragOver,
            handleDragLeave,
            handleDrop,
          }
        },
      }).mount('#app')
    </script>
  </body>
</html>
